<template>
  <el-card>
    <div>
      <div class="search">
        操作类型:
        <el-select
          v-model="operateType"
          placeholder="请选择操作类型"
          size="small"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        操作时间:
        <el-date-picker
          v-model="startDate"
          type="date"
          placeholder="开始日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          size="mini"
        >
        </el-date-picker
        >--
        <el-date-picker
          v-model="endDate"
          type="date"
          placeholder="结束日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          size="mini"
        >
        </el-date-picker>
        计划类型:
        <el-select v-model="planType" placeholder="请选择计划类型" size="mini">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-button
          class="detail"
          icon="el-icon-search"
          @click="check"
          size="small"
          >查询</el-button
        >
        <el-button
          class="rePassword"
          icon="el-icon-refresh-right"
          size="small"
          @click="reset"
          >重置</el-button
        >
      </div>
      <div class="box">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :row-style="{ height: '60px', padding: '0 0' }"
          @selection-change="handleSelectionChange"
          border
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="operationType" label="操作类型">
            <template slot-scope="scope">
              {{ scope.row.operationType == '1' ? '入库' : '出库' }}
            </template>
          </el-table-column>
          <el-table-column prop="operationDate" label="操作时间" width="120">
          </el-table-column>
          <el-table-column
            prop="planTypeName"
            label="计划类型"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="projectNum"
            label="项目编号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="materialNum"
            label="物料编号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="materialName"
            label="物料名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="assetsNum"
            label="资产编号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="orderNum"
            label="采购订单号"
            show-overflow-tooltip
            width="100px"
          >
          </el-table-column>
          <el-table-column
            prop="operationCount"
            label="操作数量"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="operationWeight"
            label="操作重量"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="entrepotPort"
            label="仓库"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="entrepotName"
            label="库位"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="entrepotAddress"
            label="终点仓"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="exchangeNum"
            label="交换单号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="situation"
            label="情况说明"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
        <!-- show-overflow-tooltip--自适应长度 -->
        <!-- 分页功能 -->

        <el-pagination
          @size-change="sizeChange"
          @current-change="pageChange"
          :current-page="page"
          :page-sizes="[3, 5, 10, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>

<script>
import qs from 'qs';
export default {
  data() {
    return {
      options: [
        {
          value: '1',
          label: '入库'
        },
        {
          value: '2',
          label: '出库'
        }
      ],
      options1: [
        {
          value: '1',
          label: '新品'
        },
        {
          value: '2',
          label: '临措'
        },
        {
          value: '3',
          label: '抢修'
        },
        {
          value: '4',
          label: '配变电'
        },
        {
          value: '5',
          label: '线路'
        }
      ],
      value: '',
      value2: '',
      total: 0,
      pageSize: 10,
      page: 1,
      data: [],
      in_wname: '',
      operateType: '',
      planType: '',
      endDate: '',
      startDate: ''
    };
  },
  methods: {
    pageChange(e) {
      this.page = e;
    },

    sizeChange(e) {
      this.pageSize = e;
    },
    // 查询信息
    check() {
      // if(this.startDate!=''){
      //   if(this.endDate!=''){
      //     this.axios({
      //       url:'http://172.16.6.152/financial/getAllAccountList',
      //       method:'post',
      //       data:{
      //               endDate:this.endDate,
      //               startDate:this.startDate,
      //               operationType:this.operateType,
      //               planTypeId:this.planType
      //             }
      //       }).then((res)=>{
      //             this.data=res.data.data.inOutAccounts
      //             console.log(this.data);
      //             this.total=res.data.data.inOutAccounts.length
      //       })
      //   }else{
      //     this.$message({
      //       type:'error',
      //       message:'截止日期不能为空'
      //     })
      //   }
      // }else{
      //   // 开始日期为空
      //    this.axios({
      //       url:'http://172.16.6.152/financial/getAllAccountList',
      //       method:'post',
      //       data:{
      //               endDate:this.endDate,
      //               startDate:this.startDate,
      //               operationType:this.operateType,
      //               planTypeId:this.planType
      //             }
      //       }).then((res)=>{
      //             this.data=res.data.data.inOutAccounts
      //             console.log(this.data);
      //             this.total=res.data.data.inOutAccounts.length
      //       })

      // }

      this.axios({
        url: '/financial/getAllAccountList',
        method: 'post',
        data: {
          endDate: this.endDate,
          startDate: this.startDate,
          operationType: this.operateType,
          planTypeId: this.planType
        }
      }).then(res => {
        this.data = res.data.data.inOutAccounts;
        this.total = res.data.data.inOutAccounts.length;
      });
    },

    // 重置
    reset() {
      this.operateType = '';
      this.endDate = '';
      this.startDate = '';
      this.planType = '';
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },

  mounted() {
    this.axios({
      url: '/financial/getAllAccountList',
      method: 'post',
      data: {
        // endDate:this.endDate,
        // startDate:this.startDate,
        // operationType:this.operateType,
        // planTypeId:this.planType
      }
    }).then(res => {
      if (res.data.code == 200) {
        // console.log(res);
        this.data = res.data.data.inOutAccounts;
        this.total = res.data.data.inOutAccounts.length;
      }
    });
  },

  // 分页计算
  computed: {
    tableData: function() {
      return this.data.slice(
        (this.page - 1) * this.pageSize,
        this.pageSize * this.page
      );
    }
  }
};
</script>

<style scoped>
.el-input {
  width: 200px;
  margin-right: 10px;
}
.search {
  border-top: 2px solid #9999;
  padding-top: 30px;
  margin-top: 15px;
}
.box {
  padding-top: 30px;
}
.el-pagination {
  margin-top: 25px;
  float: right;
}
.el-table .cell {
  text-align: center;
}
.el-table /deep/ td .cell,
.el-table /deep/ th .cell {
  text-align: center;
}

.el-button {
  margin-left: 14px;
  /* float: right; */
  /* margin-top: 10px;
  margin-bottom: 10px; */
}
</style>
